<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/resource/css/bootstrap.css">
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
</head>
<body>
<form action="update" method="post" enctype="multipart/form-data">
<div class="container" style="margin-top:25px">
<h3>修改发薪单</h3> 
<hr>
发薪单名称:<input type="text" name="id" value="${param.id }"><br><br>
发薪单名称:<input type="text" name="name" value="${pay.name }"><br><br>
所属组织: <select name="company.id" onchange="getGroups(this.value,'business.id')">
				<option value="">-请选择-</option>
			</select><br><br>
所属事业部: <select name="business.id" onchange="getGroups(this.value,'dept.id')">
				<option value="">-请选择-</option>
			</select><br><br>
所属部门: <select name="dept.id">
				<option value="">-请选择-</option>
			</select><br><br>
发放总金额:<input type="text" name="account" value="${pay.account }"><br><br>
计税标准文件:<input type="file" name="file">
<input type="hidden" name="bills" value="${pay.bills }">
<img alt="妈耶!!!网络崩溃了" src="${pay.bills }" width="50px" height="50px">
<br><br>
<hr>
<h3>修改发薪人员</h3>
<input type="button" value="添加发薪人员" onclick="addLine()">
<br>
<c:forEach items="${user }" var="u" varStatus="i">
<span>
员工姓名:<input type='text' name='users[${i.index }].name' value="${u.name }" style='width: 80px' />&nbsp;
员工类型:<select name='users[${i.index }].type'><option value=''>---员工类型---</option>	
								<option value='0' ${u.type==0?'selected':'' }>在职</option>
								<option value='1' ${u.type==1?'selected':'' }>离职</option>
						</select>&nbsp; 
发放进金额:<input type='text' name='users[${i.index }].price' value="${u.price }" style='width: 80px' />
<input type='button' value='删除' onclick='delLine(this)' /><br /></span>
</c:forEach>
<div id="ddd"></div>	
<button>修改</button>
</div>
</form>
</body>
<script type="text/javascript">
//三级联动
$(function(){
	//获取公司的id
	var companyId = '${pay.companyId}'
	var businessId = '${pay.businessId}'
	var deptId = '${pay.deptId}'
	getGroups(0,'company.id',companyId)
	getGroups(companyId,'business.id',businessId)
	getGroups(businessId,'dept.id',deptId)
})
function getGroups(pid,name,hxid){
	//发起ajax请求
	$.post("getGroups",{"pid":pid},function(obj){
		if(name == 'business.id'){
			$("[name = 'business.id']").html("<option value=''>-请选择-</option>")
		}
		if(name == 'dept.id'){
			$("[name = 'dept.id']").html("<option value=''>-请选择-</option>")
		}
		
		for ( var i in obj) {
			$("[name = '"+name+"']").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")
		}
		$("[name = '"+name+"']").val(hxid);
	},"json")
}
//加一行
var i = 1;
function addLine(){
	$("#ddd").append("<span>员工姓名:<input type='text' name='users["+i+"].name' style='width: 80px' />&nbsp;员工类型:<select name='users["+i+"].type'><option value=''>---员工类型---</option>	<option value='0'>在职</option><option value='1'>离职</option></select>&nbsp;发放进金额:<input type='text' name='users["+i+"].price' style='width: 80px' /><input type='button' value='删除' onclick='delLine(this)' /><br /></span>");
	i++;
}
//删除一行
function delLine(obj){
	$(obj).parent().remove()
	i--;
}
</script>
</html>